<template>
    <div style="height:100%">
        <div style="height: 100%;">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <van-list
                v-model="isLoading"
                :finished="finished"
                :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                loding-text="loading"
                @load="getFreshCourseList"
                style="padding-bottom: 56px;"
                >
                    <course-list-item :list="freshCourseList" v-if="freshCourseList.length>0"></course-list-item>
                    <!--暂无数据-->
                    <div v-if="!isLoading && total === 0" style="height:100%;">
                        <div class="box-table" style="width:100%;height:100%;">
                            <div class="box-table-cell" style="text-align: center;">
                                <div class="no-data">
                                    <img src="../../../../static/images/no-data.png" alt=""/>
                                    <p class="color999">{{ $t("no_data") }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <common-loading :isLoading="isLoading"></common-loading>
                </van-list>
            </van-pull-refresh>
        </div>
        <div>
            <van-popup
                v-model="show"
                round
                position="bottom">
                <van-cascader
                v-model="cascaderValue"
                :title="$t('error_catalog')"
                :placeholder="$t('please_select')"
                active-color=" #075ebb"
                :options="catalogList"
                @close="show = false"
                @change="mlChange"
                :field-names="{text: 'name', value: 'id', children: 'children'}"
                />
            </van-popup>
        </div>
    </div>
</template>

<script>
import { Tab, Tabs, Popup, Cascader } from 'vant';
import CommonLoading from '@/components/common/loading';
import courseListItem from '@/components/learn/newLearn/certifiedCoursesListItem.vue';
export default {
    name: 'certifiedCourses',
    data() {
        return {
            isLoading: false,
            pageNo: 1, // 默认页码
            itmTypeList: '', //课程类型
            total: 0, // 总数
            maxPageNo: 0, // 最大页数 优化之前无限下拉加载发送请求问题
            freshCourseList: [], // 上拉加载新数据
            currentTab: 'All',
            tndId: 0,
            cascaderValue: '',
            catalogList: [],
            show: false,
            finished: false,
            isRefresh: false
        };
    },
    components: {
        CommonLoading,
        courseListItem,
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
        vanCascader: Cascader,
        vanPopup: Popup
    },
    props: {
        mlId: {
            type: Number,
            default: 0
        }
    },
    methods: {
        /**
         * 切换tab
         * */
        changeTab(type, itemType) {
            this.currentTab = type;
            this.itmTypeList = itemType;
            this.pageNo = 1;
            this.total = 0;
            this.freshCourseList = [];
            this.$refs.scroll.reset(0);
            this.getFreshCourseList('refresh'); // 修改学习状态时刷新
        },
        /**
         * 课程列表
         * */
        getFreshCourseList(option) {
            this.isLoading = true;
            this.$axios({
                method: 'POST',
                url: `/app/api/trainee/course/center/pageList`,
                params: {
                    pageNo: this.pageNo,
                    pageSize: 10
                },
                data: {
                    itmTrainingFormList: this.itmTypeList ? [this.itmTypeList] : [],
                    isExamInd: false,
                    isMobileInd: true,
                    order: 'time',
                    sort: 'RISE',
                    tndId: this.tndId,
                    isCompulsory: false,
                    isPeriods: false,
                    tcrId: 0
                }
            }).then(res => {
                if (res && res.status === 200) {
                    this.isLoading = false;
                    if (option && option === 'refresh') {
                        this.freshCourseList = res.data.results || [];
                    } else {
                        this.freshCourseList = this.freshCourseList.concat(res.data.results);
                    }
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.freshCourseList.length >= this.total) {
                    this.finished = true;
                }
            }).catch(err => {
                console.log('err', err);
            });
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getFreshCourseList('refresh');
                this.isRefresh = false;
            }, 900);
        },
        mlChange(val) {
            // console.log(val);
            this.tndId = val.value;
            let obj = {
                name: this.$t('circle258'),
                id: val.value
            };
            let lastI = val.selectedOptions.length - 1;
            let lastChild = val.selectedOptions[lastI];
            // console.log(lastChild.id);
            let juDge = lastChild.children && lastChild.children.length > 0;
            let juDge1 = lastChild.id && lastChild.children && lastChild.children.length === 0;
            if (juDge && lastChild.children[0].name === this.$t('circle258')) {
                return;
            }
            if (juDge) {
                lastChild.children.unshift(obj);
            }
            if (juDge1) {
                lastChild.children = null;
            }
            this.getFreshCourseList('refresh');
        },
        open() { // 打开更多
            this.show = true;
            this.cascaderValue = '';
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/tree/list/tree`,
                params: {
                    trainId: ''
                }
            }).then((res) => {
                // 目录
                this.catalogList = res.data;
                let obj = {
                    name: this.$t('circle258'),
                    id: 0
                };
                this.catalogList.unshift(obj);
            });
        },
        toSearch() {
            this.$router.replace({path: '/search'});
        }
    },
    computed: {
        /**
         *  课程目录列表
         * */
        catalogtabList() {
            return [
                {id: 1, type: 'All', itemType: '', name: this.$t('type_all_title')},
                {id: 1, type: 'SELFSTUDY', itemType: '0', name: this.$t('cos_type_selfstudy')},
                {id: 2, type: 'CLASSROOM', itemType: '1', name: this.$t('CLASSROOM_Course')},
                {id: 4, type: 'INTEGRATED', itemType: '3', name: this.$t('INTEGRATED')},
                {id: 3, type: 'CLASSROOM', itemType: '2', name: this.$t('CLASSROOM_Course1')}
            ];
        },
        /**
         * 学习状态
         * */
        appStatus() {
            return [
                {id: 1, type: 'All', name: this.$t('type_all_title')}, // 全部
                {id: 2, type: 'I', name: this.$t('cos_app_inprogress')}, // 进行中
                {id: 3, type: 'C', name: this.$t('cos_app_completed')}, // 已完成
                {id: 4, type: 'notIAndC', name: this.$t('cos_other')} // 其他
            ];
        }
    },
    mounted() {
        if (this.$route.query.type) {
            this.currentTab = this.$route.query.type;
            this.itmTypeList = this.$route.query.type;
            console.log(this.currentTab);
        }
        this.getFreshCourseList('refresh');
    },
    watch: {
        mlId(nV) {
            this.tndId = nV;
            this.pageNo = 1;
            this.getFreshCourseList('refresh');
        }
    }
};
</script>

<style scoped lang="less">
// 公共滑动盒子
.content-box{
    display: -webkit-box;
    overflow-x: scroll;
    -webkit-overflow-scrolling:touch;
    &::-webkit-scrollbar { /**chrome、safari */
        display: none;
    }
    scrollbar-width: none; /**火狐 */
    -ms-overflow-style: none; /**IE10+ */
}
.catalog{
    width: calc( 100% - 40px );
    padding-right: 5px;
    background: white;
    position: relative;
    /deep/.van-tabs__line{
        display: none;
    }
    /deep/.van-tabs--line .van-tabs__wrap{
        height: 50px;
    }
}
.icon{
    display: inline-block;
    width: 38px;
    height: 45px;
    text-align: center;
    color: #999;
    position: absolute;
    top: 0;
    right: -38px;
    background: white;
    line-height: 45px;
    border-left: 1px solid #eee;
}
.scroll-box{
    height: calc(100% - 50px);
    /deep/.vue-scroll>div {
        height: 100%;
    }
}
</style>
